<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>layui</title>
    <div th:include="common :: css"></div>
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<!--th:object="${bean}"传的是一个对象，th:value="*{account}"从对象中获得一个属性的值。
或者方式二不要定义th:object="${bean}"直接使用th:value="bean.account"对象的属性的值-->

<body>
<div class="layui-form layuimini-form">
    <form class="layui-form" action="" method="post" th:object="${bean}">
        <input type="hidden" th:value="*{id}" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label required">账号</label>
            <div class="layui-input-block">
                <input type="text" name="account" lay-verify="required|account" lay-reqtext="账号不能为空" placeholder="请输入账号" th:value="*{account}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required|password" lay-reqtext="密码不能为空" placeholder="请输入密码" th:value="*{password}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required|passwords" lay-reqtext="密码不能为空" placeholder="请再次输入密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">手机号</label>
            <div class="layui-input-block">
                <input type="number" name="mobile" lay-verify="required|phone" lay-reqtext="手机号不能为空" placeholder="请输入手机号" th:value="*{mobile}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" lay-verify="required|email" lay-reqtext="邮箱不能为空" placeholder="请输入你的邮箱" th:value="*{email}" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isAllow" th:value="1" title="启用" th:field="*{isAllow}">
                <input type="radio" name="isAllow" th:value="0" title="停用" th:field="*{isAllow}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </form>
</div>
<div th:include="common :: js"></div>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {
                //使用Jquery的ajax提交数据
                $.post("/user/consumer/save",data.field,function (data) {
                    console.log(data);
                });
                // 关闭弹出层
                layer.close();
                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);
            });
            return false;
        });


        //用户注册校验
        form.verify({
            required: [/[\S]+/, "必填项不能为空"],
            //用户账户校验
            account: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            },

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ],

            // 校验两次密码是否一致
            passwords: function(value){
                if($('input[name=password]').val() !== value)
                    return '两次密码输入不一致！';
            },
            // 手机号校验
            phone: [/^1\d{10}$/, "请输入正确的手机号"],
            //邮箱验证
            email: [/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/, "邮箱格式不正确"],
        });
    });
</script>
</body>
</html>